﻿<UserControl
    x:Class="WinRTXamlToolkit.Sample.Views.InputDialogTestView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:local="using:WinRTXamlToolkit.Sample.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style
            x:Key="CustomInputDialogStyle"
            TargetType="controls:InputDialog">
            <Setter
                Property="Background"
                Value="#FFDD8800" />
            <Setter
                Property="BorderBrush"
                Value="#80FFFFFF" />
            <Setter
                Property="BorderThickness"
                Value="1" />
            <!-- For some reason this does not work -->
            <!--<Setter
                Property="ButtonsPanelOrientation"
                Value="Vertical" />-->
            <Setter
                Property="InputText"
                Value="Initial Text" />
            <Setter
                Property="AwaitsCloseTransition"
                Value="False" />
            <!-- For some reason this does not work -->
            <!--<Setter
                Property="BackgroundScreenBrush"
                Value="#40FF0000" />-->
            <Setter
                Property="IsLightDismissEnabled"
                Value="True" />
            <!-- For some reason this does not work -->
            <!--<Setter
                Property="BackgroundStripeBrush"
                Value="White" />-->
            <Setter
                Property="Padding"
                Value="35" />
            <Setter
                Property="TitleStyle">
                <Setter.Value>
                    <Style
                        TargetType="TextBlock">
                        <Setter
                            Property="FontFamily"
                            Value="Segoe UI" />
                        <Setter
                            Property="FontSize"
                            Value="48" />
                        <Setter
                            Property="Margin"
                            Value="3,0" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter
                Property="TextStyle">
                <Setter.Value>
                    <Style
                        TargetType="TextBlock">
                        <Setter
                            Property="FontFamily"
                            Value="Consolas" />
                        <Setter
                            Property="FontSize"
                            Value="24" />
                        <Setter
                            Property="Margin"
                            Value="3,25,3,5" />
                        <Setter
                            Property="TextWrapping"
                            Value="Wrap" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter
                Property="InputTextStyle">
                <Setter.Value>
                    <Style
                        TargetType="TextBox">
                        <Setter
                            Property="Background"
                            Value="#DDFF4444" />
                        <Setter
                            Property="BorderThickness"
                            Value="1" />
                        <Setter
                            Property="Margin"
                            Value="3,0,3,10" />
                        <Setter
                            Property="FontSize"
                            Value="24" />
                        <Setter
                            Property="TextWrapping"
                            Value="Wrap" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter
                Property="ButtonStyle">
                <Setter.Value>
                    <Style
                        TargetType="ButtonBase">
                        <Setter
                            Property="Background"
                            Value="#DDFF4444" />
                        <Setter
                            Property="BorderThickness"
                            Value="1" />
                        <Setter
                            Property="FontSize"
                            Value="24" />
                    </Style>
                </Setter.Value>
            </Setter>
            <Setter
                Property="Template">
                <Setter.Value>
                    <ControlTemplate
                        TargetType="controls:InputDialog">
                        <Grid
                            x:Name="LayoutRoot"
                            Background="#40FF0000">
                            <!--{TemplateBinding BackgroundScreenBrush}-->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup
                                    x:Name="PopupStates">
                                    <VisualState
                                        x:Name="OpenPopupState">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="LayoutRoot"
                                                Storyboard.TargetProperty="Opacity"
                                                From="0"
                                                To="1"
                                                Duration="0:0:0.4">
                                                <DoubleAnimation.EasingFunction>
                                                    <PowerEase
                                                        EasingMode="EaseOut"
                                                        Power="3" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                            <DoubleAnimation
                                                x:Name="SlideInAnimation"
                                                Storyboard.TargetName="ContentBorderTranslation"
                                                Storyboard.TargetProperty="X"
                                                From="200"
                                                To="0"
                                                Duration="0:0:.4">
                                                <DoubleAnimation.EasingFunction>
                                                    <PowerEase
                                                        EasingMode="EaseOut"
                                                        Power="2" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState
                                        x:Name="ClosedPopupState">
                                        <Storyboard>
                                            <DoubleAnimation
                                                x:Name="SlideOutAnimation"
                                                Storyboard.TargetName="ContentBorderTranslation"
                                                Storyboard.TargetProperty="X"
                                                From="0"
                                                To="-200"
                                                Duration="0:0:.4">
                                                <DoubleAnimation.EasingFunction>
                                                    <PowerEase
                                                        EasingMode="EaseOut"
                                                        Power="2" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                            <DoubleAnimation
                                                Storyboard.TargetName="LayoutRoot"
                                                Storyboard.TargetProperty="Opacity"
                                                From="1"
                                                To="0"
                                                Duration="0:0:.4">
                                                <DoubleAnimation.EasingFunction>
                                                    <PowerEase
                                                        EasingMode="EaseOut"
                                                        Power="3" />
                                                </DoubleAnimation.EasingFunction>
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <!-- For some reason this does not work -->
                            <!--{TemplateBinding BackgroundStripeBrush}-->
                            <Border
                                x:Name="BlackStripe"
                                Background="White"
                                VerticalAlignment="Center"
                                HorizontalAlignment="Stretch">
                                <Border
                                    x:Name="ContentBorder"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    VerticalAlignment="Center"
                                    HorizontalAlignment="Center"
                                    Margin="0,25">
                                    <Border.RenderTransform>
                                        <TranslateTransform
                                            x:Name="ContentBorderTranslation" />
                                    </Border.RenderTransform>
                                    <StackPanel
                                        x:Name="ContentPanel"
                                        Margin="{TemplateBinding Padding}"
                                        MinWidth="200">
                                        <TextBlock
                                            x:Name="TitleTextBlock"
                                            Style="{TemplateBinding TitleStyle}" />
                                        <TextBlock
                                            x:Name="TextTextBlock"
                                            Style="{TemplateBinding TextStyle}" />
                                        <TextBox
                                            x:Name="InputTextBox"
                                            Style="{TemplateBinding InputTextStyle}" />
                                        <StackPanel
                                            x:Name="ButtonsPanel"
                                            Orientation="{TemplateBinding ButtonsPanelOrientation}"
                                            HorizontalAlignment="Left" />
                                    </StackPanel>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid>
        <GridView
            SelectionMode="None">
            <GridView.ItemContainerStyle>
                <Style
                    TargetType="GridViewItem">
                    <Setter
                        Property="HorizontalContentAlignment"
                        Value="Left" />
                    <Setter
                        Property="Width"
                        Value="350" />
                </Style>
            </GridView.ItemContainerStyle>
            <Button
                Content="Regular InputDialog Style"
                Style="{StaticResource TextButtonStyle}"
                Click="RegularStyleTest" />
            <Button
                Content="Custom InputDialog Style"
                Style="{StaticResource TextButtonStyle}"
                Click="CustomStyleTest" />
            <Button
                Content="Grid-hosted InputDialog"
                Style="{StaticResource TextButtonStyle}"
                Click="GridHostedTest" />
            <Button
                Content="ContentControl-hosted InputDialog"
                Style="{StaticResource TextButtonStyle}"
                Click="ContentControlHostedTest" />
        </GridView>

        <controls:InputDialog
            x:Name="GridHostedDialog" />

        <ContentControl>
            <controls:InputDialog
                x:Name="ContentControlHostedDialog" />
        </ContentControl>
    </Grid>
</UserControl>
